<template>
  <div>
    <div class="title ax_default">电芯拆解自动记录分析系统</div>
    <Form :model="formData" :rules="rules" @keydown.enter.native="login" ref="loginForm" style="margin-top: 50px;">
      <FormItem prop="loginName">
        <Input placeholder="用户名" v-model="formData.loginName">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem prop="loginPwd">
        <Input placeholder="密码" type="password" v-model="formData.loginPwd">
          <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <!-- <FormItem prop="code" class="code">
        <Input class="code-input" placeholder="请输入验证码" v-model="formData.code"></Input>
        <img :src="codeUrl" @click="verificationCode" class="codeUrl" v-if="codeUrl" />
      </FormItem> -->
      <!-- <FormItem class="remember">
        <Checkbox v-model="checked" @on-change="changeRememberPassword">记住密码</Checkbox>
        <span class="forget">忘记密码？</span>
      </FormItem> -->
      <FormItem>
        <Button :loading="btnLoading" @click="login" long type="primary">登录</Button>
      </FormItem>
      <!-- <div class="other-way">
        <div class="inline align" style="float:left">
          <span>其他方式登录</span>
        </div>
        <div class="inline align" style="float:right">
          <img alt class="marginLeft" src="../../../assets/images/login-taobao.png" />
          <img alt class="marginLeft" src="../../../assets/images/login-alipay.png" />
          <img alt class="marginLeft" src="../../../assets/images/login-sina.png" />
        </div>
      </div> -->
    </Form>
  </div>
</template>
<script>
import { loginApi } from '@/api/login';
import { PRIVILEGE_TYPE } from '@/constants/login';

const Base64 = require("js-base64").Base64;

export default {
  name: 'LoginForm',
  props: {
    // 登录名规则
    loginNameRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '账号不能为空', trigger: 'blur' }];
      }
    },
    // 密码规则
    loginPwdRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '密码不能为空', trigger: 'blur' }];
      }
    }
    ,
    // 验证码规则
    codedRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '验证码不能为空', trigger: 'blur' }];
      }
    }
  },
  data() {
    return {
      // 防止重复提交 按钮加载状态
      btnLoading: false,
      formData: {
        code: '',
        codeUuid: '',
        loginName: '',
        loginPwd: '',
        deviceType:'pc'
      },
      checked: false,
      codeUrl: ''
    };
  },
  computed: {
    rules() {
      return {
        loginName: this.loginNameRules,
        loginPwd: this.loginPwdRules,
        code: this.codedRules
      };
    }
  },
  mounted() {
    //this.verificationCode();
    let loginPwd = localStorage.getItem("loginPwd");
    if (loginPwd) {
      this.formData.loginName = localStorage.getItem("loginName");
      this.formData.loginPwd = Base64.decode(loginPwd);
      this.checked = true;
    }
  },
  methods: {
    // 获取验证码
    async verificationCode() {
      let result = await loginApi.getVerificationCode();
      let datas = result.data;
      this.formData.codeUuid = datas.uuid;
      this.codeUrl = datas.code;
    },
    // 登录
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          if (this.checked) {
            if (this.formData.loginPwd && this.formData.loginName) {
              let loginPwd = Base64.encode(this.formData.loginPwd);
              localStorage.setItem("loginName", this.formData.loginName);
              localStorage.setItem("loginPwd", loginPwd);
            }
          }
          this.loginSuccess();
        }
      });
    },
    // 登录 - 异步
    async loginSuccess() {
      try {
        this.btnLoading = true;
        let param = {
          username:this.formData.loginName,
          password:this.formData.loginPwd,
          code:this.formData.code,
          codeUuid:this.formData.codeUuid,
          grantType:this.formData.deviceType
        }
        let loginResult = await loginApi.login(param);
        let loginInfo = loginResult.data;
        let loginName = localStorage.getItem("loginName");
        let loginPwd = localStorage.getItem("loginPwd");
        localStorage.clear();
        if (loginPwd) {
          localStorage.setItem("loginName", loginName);
          localStorage.setItem("loginPwd", loginPwd);
        }
        this.$store.commit('setToken', loginInfo.xaccessToken);
        // 保存用户登录
        this.$store.commit('setUserLoginInfo', {
          id: loginInfo.id,
          username: loginInfo.username,
          nickName: loginInfo.nickName,
          actualName: loginInfo.actualName,
          phone: loginInfo.phone,
          isSuperMan: loginInfo.isSuperMan
        });
        //设置权限
        this.$store.commit('setUserPrivilege', loginInfo.privilegeList);
        this.btnLoading = false;
        // 跳转到首页
        this.$router.push({
          name: this.$config.homeName
        });
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
        this.btnLoading = false;
        this.verificationCode();
      }
    },
    changeRememberPassword(checked) {
      if (!checked) {
        if (localStorage.getItem("loginName") != null)
          localStorage.removeItem("loginName");
        if (localStorage.getItem("loginPwd") != null)
          localStorage.removeItem("loginPwd");
      }
    }
  }
};
</script>
